<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=11">
  <title>标签管理</title>
  <link href="./WinCloud 8.0_files/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="./WinCloud 8.0_files/bootstrap-wincloud.css" rel="stylesheet" type="text/css">
  <link href="./WinCloud 8.0_files/bootstrap-table.min.css" rel="stylesheet" type="text/css">
  <link href="./WinCloud 8.0_files/main.css" rel="stylesheet" type="text/css">
  <link href="./WinCloud 8.0_files/angular-table.css" rel="stylesheet" type="text/css">
  <link href="./WinCloud 8.0_files/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="./WinCloud 8.0_files/icon.css" rel="stylesheet" type="text/css">
  <link href="./WinCloud 8.0_files/iconfont.css" rel="stylesheet" type="text/css">
  <link href="./WinCloud 8.0_files/sourcehansans.css" rel="stylesheet" type="text/css">
  <link href="./WinCloud 8.0_files/main(1).css" rel="stylesheet" type="text/css">
  <style>
    .toolbar { margin-bottom: 10px; }
    .main-content { padding: 20px; }
    .bg-white-container { background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .nav-tabs { border-bottom: 2px solid #e7e7e7; }
    .nav-tabs > li > a { border: none; color: #666; }
    .nav-tabs > li.active > a { background: #fff; border: none; border-bottom: 2px solid #337ab7; color: #337ab7; }
    .btn-red { background: #d9534f; border-color: #d9534f; color: #fff; }
    .btn-red:hover { background: #c9302c; border-color: #ac2925; }
    .table th { background: #f5f5f5; border-top: none; }
    .table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9; }
    .breadcrumb { background: transparent; padding: 8px 0; margin-bottom: 20px; }
    .breadcrumb > li + li:before { content: "> "; color: #ccc; }
    .breadcrumb > .active { color: #337ab7; }
    .goBackBtn a { color: #337ab7; cursor: pointer; }
    .introduction { margin-bottom: 20px; }
    .intro-title { font-size: 24px; font-weight: bold; color: #333; }
    
    /* 左侧导航宽度优化 */
    .aside { width: 220px; min-width: 220px; }
    .aside ul li a { padding: 12px 20px; }
    .aside ul li a span { margin-left: 8px; }
    .aside .submenu { padding-left: 20px; }
    
    /* 主体区域高度优化 */
    .main-frame { height: calc(100vh - 60px); }
    .main-content { height: calc(100vh - 120px); overflow-y: auto; }
    
    /* tab内容间距优化 */
    .tab-content { padding-top: 25px; }
    .tab-pane { min-height: 400px; }
    
    /* 工具栏优化 */
    .toolbar { margin: 20px 0 15px 0; padding: 15px 0; border-bottom: 1px solid #eee; }
    
    /* 表格优化 */
    .table { margin-top: 15px; }
    .table thead th { padding: 12px 8px; }
    .table tbody td { padding: 10px 8px; }
    
    /* 表格样式优化 */
    .table { 
      margin-bottom: 0; 
      background: #fff; 
    }
    
    .table thead th { 
      background: #f8f9fa; 
      border-bottom: 2px solid #dee2e6; 
      font-weight: 600; 
      color: #495057; 
      padding: 15px 12px; 
      vertical-align: middle; 
    }
    
    .table tbody td { 
      border-top: 1px solid #dee2e6; 
      padding: 12px; 
      vertical-align: middle; 
    }
    
    .table tbody tr:hover { 
      background-color: #f8f9fa; 
    }
    
    .table-striped > tbody > tr:nth-of-type(odd) { 
      background-color: #f8f9fa; 
    }
    
    .table-striped > tbody > tr:nth-of-type(odd):hover { 
      background-color: #e9ecef; 
    }
    
    /* 按钮样式优化 */
    .btn { 
      border-radius: 4px; 
      font-weight: 500; 
      padding: 8px 16px; 
      transition: all 0.3s ease; 
    }
    
    .btn:hover { 
      transform: translateY(-1px); 
      box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
    }
    
    .btn-red { 
      background: #dc3545; 
      border-color: #dc3545; 
      color: #fff; 
    }
    
    .btn-red:hover { 
      background: #c82333; 
      border-color: #bd2130; 
    }
    
    /* 内容容器高度控制 */
    .bg-white-container { min-height: 500px; max-height: 600px; overflow: hidden; }
    
    /* 表格容器优化 */
    .table-container { 
      margin-top: 10px; 
      max-height: 400px; 
      overflow-y: auto; 
      border: 1px solid #ddd; 
      border-radius: 4px; 
    }
    
    /* 响应式优化 */
    @media (max-width: 1200px) {
      .aside { width: 200px; min-width: 200px; }
    }
    
    /* 页面整体高度控制 */
    body { 
      height: 100vh; 
      overflow: hidden; 
    }
    
    .main-frame { 
      height: calc(100vh - 60px); 
      display: flex; 
    }
    
    .main-content { 
      flex: 1; 
      height: calc(100vh - 120px); 
      overflow-y: auto; 
      padding: 20px; 
    }
    
    /* 左侧导航固定宽度 */
    .aside { 
      width: 220px; 
      min-width: 220px; 
      flex-shrink: 0; 
      background: #f8f9fa; 
      border-right: 1px solid #dee2e6; 
      overflow-y: auto; 
      overflow-x: hidden; 
    }
    
    /* 左侧导航菜单样式 - 完全按照图片实现 */
    .aside ul { 
      list-style: none; 
      margin: 0; 
      padding: 0; 
      width: 100%; 
    }
    
    .aside ul li { 
      border-bottom: 1px solid #f0f0f0; 
      width: 100%; 
    }
    
    .aside ul li a { 
      display: block; 
      height: 45px; 
      line-height: 45px; 
      cursor: pointer; 
      padding-left: 15px; 
      border-left: 3px #fff solid; 
      text-decoration: none; 
      transition: background-color 0.1s ease-in; 
      color: #000; 
      overflow: hidden; 
      position: relative; 
      box-sizing: border-box; 
    }
    
    .aside ul li a:hover { 
      text-decoration: none; 
      background-color: #f8f9fa; 
    }
    
    /* 激活状态样式 - 完全按照图片 */
    .aside ul li.active a,
    .aside ul li.active a:hover { 
      border-left-color: #d93934; 
      background-color: #fff5f5; 
      color: #d93934; 
    }
    
    .aside ul li.active a span,
    .aside ul li.active a:hover span { 
      opacity: 1; 
    }
    
    /* 展开状态样式 */
    .aside ul li.open > a { 
      background: #f8f9fa; 
      color: #000; 
    }
    
    .aside .submenu { 
      background: #fff; 
      border-top: 1px solid #f0f0f0; 
      max-height: 0; 
      overflow: hidden; 
      transition: max-height 0.3s ease; 
      width: 100%; 
      position: relative; 
    }
    
    .aside ul li.open .submenu { 
      max-height: 200px; 
      border-bottom: 1px solid #f0f0f0; 
    }
    
    /* 子菜单样式 - 完全按照图片 */
    .aside .submenu li a { 
      padding-left: 40px !important; 
      font-size: 14px; 
      height: 40px; 
      line-height: 40px; 
      width: 100%; 
      position: relative; 
      box-sizing: border-box; 
    }
    
    .aside .submenu li.active a { 
      background: #fff5f5; 
      color: #d93934; 
      border-left: 3px solid #d93934; 
    }
    
    .aside .submenu li a:hover { 
      background: #f8f9fa; 
      color: #000; 
    }
    
    /* 子菜单文字样式 */
    .aside .submenu li a span { 
      display: inline-block; 
      vertical-align: middle; 
      line-height: 40px; 
      color: inherit; 
    }
    
    /* 确保激活状态的文字颜色 */
    .aside ul li.active a .font_family { 
      color: #d93934; 
    }
    
    .aside ul li.active a span:not(.font_family) { 
      color: #d93934; 
    }
    
    /* 图标样式 - 完全按照图片 */
    .aside .font_family { 
      margin-right: 12px; 
      font-size: 16px; 
      color: #000; 
      display: inline-block; 
      vertical-align: middle; 
      line-height: 45px; 
    }
    
    /* 菜单文字样式 - 完全按照图片 */
    .aside ul li a span:not(.font_family) { 
      display: inline-block; 
      vertical-align: middle; 
      line-height: 45px; 
      color: inherit; 
    }
    
    /* 移除重复的样式定义，保持布局一致性 */
    .aside ul li a { 
      display: block; 
      height: 45px; 
      line-height: 45px; 
      cursor: pointer; 
      padding-left: 15px; 
      border-left: 3px #fff solid; 
      text-decoration: none; 
      transition: background-color 0.1s ease-in; 
      color: #000; 
      overflow: hidden; 
      position: relative; 
      box-sizing: border-box; 
    }
    
    /* 子菜单样式统一 */
    .aside .submenu li a { 
      padding-left: 40px !important; 
      font-size: 14px; 
      height: 40px; 
      line-height: 40px; 
      width: 100%; 
      position: relative; 
      box-sizing: border-box; 
    }
    
    /* 使用传统布局 */
    .aside ul li a,
    .aside .submenu li a { 
      display: block; 
    }
    
    .aside ul li a span,
    .aside .submenu li a span { 
      display: inline-block; 
      vertical-align: middle; 
    }
    
    /* 主菜单文字居中 */
    .aside > ul > li > a span:not(.font_family) { 
      text-align: center; 
      margin: 0 auto; 
      flex: 0 1 auto; 
    }
    
    /* 展开箭头样式 - 参考WinCloud 8.0.html */
    .aside .fa-chevron-right { 
      position: relative; 
      margin-right: 10px; 
      font-size: 10px; 
      top: 18px; 
      opacity: 0.7; 
    }
    
    .aside .open .fa-chevron-right { 
      -webkit-transform: rotate(90deg); 
      -moz-transform: rotate(90deg); 
      -o-transform: rotate(90deg); 
      -ms-transform: rotate(90deg); 
      transform: rotate(90deg); 
    }
    
    /* 子菜单样式 - 参考WinCloud 8.0.html */
    .submenu > li > a { 
      padding-left: 40px !important; 
    }
    
    /* 移除之前的箭头样式 */
    .aside ul li.open > a .fa-chevron-right { 
      transform: none; 
      transition: none; 
      flex-shrink: 0; 
      width: auto; 
      text-align: center; 
      position: relative; 
      right: auto; 
      display: block; 
      align-items: center; 
      justify-content: center; 
      height: auto; 
    }
    
    .aside ul li > a .fa-chevron-right { 
      transition: none; 
      flex-shrink: 0; 
      width: auto; 
      text-align: center; 
      position: relative; 
      right: auto; 
      display: block; 
      align-items: center; 
      justify-content: center; 
      height: auto; 
    }
    
    /* 确保导航栏稳定性 */
    .aside * { 
      box-sizing: border-box; 
    }
    
    /* 子菜单展开动画优化 */
    .aside .submenu { 
      background: #fff; 
      border-top: 1px solid #dee2e6; 
      max-height: 0; 
      overflow: hidden; 
      transition: max-height 0.3s ease; 
      width: 100%; 
      position: relative; 
    }
    
    .aside ul li.open .submenu { 
      max-height: 200px; 
      border-bottom: 1px solid #e9ecef; 
    }
    
    /* 菜单项悬停效果增强 */
    .aside ul li a:active { 
      background: #dee2e6; 
      transform: scale(0.98); 
    }
    
    /* 确保图标和文字对齐 */
    .aside ul li a { 
      padding: 15px 20px; 
      display: flex; 
      align-items: center; 
      color: #495057; 
      text-decoration: none; 
      transition: all 0.3s ease; 
      min-height: 50px; 
      box-sizing: border-box; 
      width: 100%; 
      position: relative; 
      justify-content: flex-start; 
    }
    
    /* 面包屑和标题优化 */
    .breadcrumb { 
      background: transparent; 
      padding: 12px 0; 
      margin-bottom: 25px; 
      border-bottom: 1px solid #e9ecef; 
    }
    
    .breadcrumb > li + li:before { 
      content: "> "; 
      color: #6c757d; 
      margin: 0 8px; 
    }
    
    .breadcrumb > .active { 
      color: #007bff; 
      font-weight: 600; 
    }
    
    .goBackBtn a { 
      color: #007bff; 
      cursor: pointer; 
      text-decoration: none; 
    }
    
    .goBackBtn a:hover { 
      color: #0056b3; 
      text-decoration: underline; 
    }
    
    .introduction { 
      margin-bottom: 25px; 
      padding: 20px 0; 
    }
    
    .intro-title { 
      font-size: 28px; 
      font-weight: 600; 
      color: #212529; 
      position: relative; 
      padding-left: 15px; 
    }
    
    .intro-title:before { 
      content: ""; 
      position: absolute; 
      left: 0; 
      top: 50%; 
      transform: translateY(-50%); 
      width: 4px; 
      height: 24px; 
      background: #007bff; 
      border-radius: 2px; 
    }
    
    /* 标签页优化 */
    .nav-tabs { 
      border-bottom: 2px solid #e9ecef; 
      margin-bottom: 0; 
    }
    
    .nav-tabs > li > a { 
      border: none; 
      color: #6c757d; 
      padding: 15px 25px; 
      font-weight: 500; 
      transition: all 0.3s ease; 
    }
    
    .nav-tabs > li > a:hover { 
      border: none; 
      background: #f8f9fa; 
      color: #495057; 
    }
    
    .nav-tabs > li.active > a { 
      background: #fff; 
      border: none; 
      border-bottom: 3px solid #007bff; 
      color: #007bff; 
      font-weight: 600; 
    }
  </style>
</head>
<body>
  <!-- 头部导航 -->
  <div class="head">
    <div class="brank">
      <a href="https://cloud.192.168.209.220.nip.io/index.html">
        <img style="max-width: 140px;max-height: 36px;" src="./WinCloud 8.0_files/instance-vm.png" alt="">
      </a>
      <div style="display: inline-block;height:34px; border-right:1px #1A1919 solid;position: relative;top: 12px;margin-left: 10px"></div>
    </div>
    
    <div style="display: inline-block;color: #fff;padding-right:20px" class="pull-right">
      <span class="dropdown pull-right" style="margin-right:15px">
        <a href="javascript:void(0)" class="dropdown-toggle" style="color: #fff;" aria-haspopup="true" aria-expanded="false">
          超级管理员
        </a>
        <ul class="dropdown-menu dropdown-menu-head" style="background-color: #fff;padding:10px 0;color: #000">
          <li>超级管理员</li>
        </ul>
      </span>
      <span class="dropdown pull-right">
        <a href="javascript:void(0)" class="dropdown-toggle" style="color: #fff;" aria-haspopup="true" aria-expanded="false">
          admin
        </a>
        <ul class="dropdown-menu" style="background-color: #fff;padding:15px;color: #000">
          <li>用户名：admin</li>
          <li class="text-center">
            <a href="javascript:void(0)">退出</a>
          </li>
        </ul>
      </span>
    </div>
    
    <div class="pull-right item-margin-right" style="height: 18px;border-right:1px #717171 solid;position: relative;top:18px"></div>
    
    <ul class="head-nav">
      <li><a href="https://cloud.192.168.209.220.nip.io/index.html#/main/dashboard">首页</a></li>
      <li><a style="width:120px" href="https://cloud.192.168.209.220.nip.io/index.html#/main/costAnalysisFrame">资源成本分析</a></li>
      <li class="active"><a href="https://cloud.192.168.209.220.nip.io/index.html#/main/bussinessFrame">服务运营</a></li>
      <li><a href="https://cloud.192.168.209.220.nip.io/index.html#/main/operationFrame">监控运维</a></li>
      <li><a href="https://cloud.192.168.209.220.nip.io/index.html#/main/systemManagerFrame/user/index">系统管理</a></li>
      <li><a href="https://cloud.192.168.209.220.nip.io/index.html#/main/addPlatformFrame">基础设施</a></li>
      <li><a href="https://cloud.192.168.209.220.nip.io/index.html#/main/reportFrame">报表管理</a></li>
    </ul>
  </div>

  <!-- 主体框架 -->
  <div class="main-frame">
    <!-- 左侧菜单 -->
    <div class="aside">
      <ul>
        <li><a href="https://cloud.192.168.209.220.nip.io/index.html#/main/bussinessFrame/service/serviceDirectory">
          <span style="font-size: 16px;position: relative;top:2px" class="font_family icon-FuWu"></span>
          <span>服务管理</span>
        </a></li>
        <li><a href="https://cloud.192.168.209.220.nip.io/index.html#/main/bussinessFrame/VDC/main/index">
          <span style="font-size: 16px;position: relative;top:2px" class="font_family icon-VDC"></span>
          <span>VDC管理</span>
        </a></li>
        <li><a href="https://cloud.192.168.209.220.nip.io/index.html#/main/bussinessFrame/bussystem/index">
          <span style="font-size: 16px;position: relative;top:2px" class="font_family icon-YeWuXiTong1"></span>
          <span>应用系统</span>
        </a></li>
        <li><a href="https://cloud.192.168.209.220.nip.io/index.html#/main/bussinessFrame/order/index">
          <span style="font-size: 16px;position: relative;top:2px" class="font_family icon-DingDanShenPi"></span>
          <span>订单审批</span>
        </a></li>
        <li class="open">
          <a href="javascript:void(0)">
            <span style="font-size: 16px;position: relative;top:2px" class="font_family icon-ZiYuanShiLi-White"></span>
            <span>服务实例</span>
            <i class="fa fa-chevron-right pull-right" aria-hidden="true"></i>
          </a>
          <ul class="submenu collapse in" style="height: auto;">
            <li class="active"><a href="javascript:void(0)"><span>标签管理</span></a></li>
          </ul>
        </li>
      </ul>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 面包屑导航 -->
      <ol class="breadcrumb">
        <li class="goBackBtn"><a href="javascript:void(0)">返回</a></li>
        <li class="location">当前位置：</li>
        <li class="path">服务运营</li>
        <li class="path">服务实例</li>
        <li class="path active">标签管理</li>
      </ol>

      <!-- 页面标题 -->
      <div class="introduction">
        <span class="intro-title">标签管理</span>
      </div>

      <!-- 标签管理内容 -->
      <div class="bg-white-container" style="padding: 15px 20px;">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab-manage" data-toggle="tab">标签管理</a></li>
          <li><a href="#tab-related" data-toggle="tab">关联资源</a></li>
        </ul>

        <div class="tab-content">
          <!-- 标签管理标签页 -->
          <div class="tab-pane active" id="tab-manage">
            <div class="toolbar">
              <button id="btn-create" class="btn btn-red">+ 新建</button>
              <button id="btn-delete" class="btn btn-default" disabled>删除</button>
            </div>
            <div class="table-container">
              <table class="table table-striped" id="table-tags">
                <thead>
                  <tr>
                    <th style="width:40px"><input type="checkbox" id="chk-all"></th>
                    <th>标签名</th>
                    <th style="width:220px">更新时间</th>
                    <th style="width:120px">关联资源</th>
                    <th style="width:120px">操作</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
          </div>

          <!-- 关联资源标签页 -->
          <div class="tab-pane" id="tab-related">
            <div class="toolbar">
              <select id="filter-select" class="form-control" style="width:160px;display:inline-block;margin-right:6px"></select>
              <button id="btn-filter" class="btn btn-default">筛选</button>
              <button id="btn-refresh" class="btn btn-default">刷新</button>
              <button id="btn-download" class="btn btn-default">
                <img style="width: 18px;" src="./WinCloud 8.0_files/DaoChu.svg" alt=""> 下载
              </button>
            </div>
            <div class="table-container">
              <table class="table table-striped" id="table-related">
                <thead>
                  <tr>
                    <th>资源名称</th>
                    <th style="width:160px">资源类型</th>
                    <th style="width:120px">标签数量</th>
                    <th>标签</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新建标签对话框 -->
  <div class="modal fade" id="createTagModal" tabindex="-1" role="dialog" aria-labelledby="createTagLabel">
    <div class="modal-dialog" role="document" style="width:420px;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="createTagLabel">新建标签</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="control-label">标签名：</label>
            <input id="newTagName" type="text" class="form-control" placeholder="请输入标签名">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="confirmCreateTag">确定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 脚本引用 -->
  <script src="./WinCloud 8.0_files/jquery-1.9.1.min.js.下载"></script>
  <script src="./WinCloud 8.0_files/bootstrap.min.js.下载"></script>
  
  <script>
    (function(){
      var tags = [
        { name: '社保系统', updatedAt: '2025-08-04 15:26:39', related: 0 },
        { name: '结算系统', updatedAt: '2025-08-04 15:26:59', related: 1 }
      ];
      var resources = [
        { name: '新增云主机-250729152406353-0', type: '云主机', tags: ['社保系统'] }
      ];

      function renderTags() {
        var tbody = document.querySelector('#table-tags tbody');
        var chkAll = document.getElementById('chk-all');
        tbody.innerHTML = tags.map(function(t, idx){
          return '<tr>'+
            '<td><input type="checkbox" class="row-chk" data-index="'+idx+'"></td>'+
            '<td>'+t.name+'</td>'+
            '<td>'+t.updatedAt+'</td>'+
            '<td>'+t.related+'</td>'+
            '<td><a href="javascript:void(0)" class="link-delete" data-index="'+idx+'">删除</a></td>'+
          '</tr>';
        }).join('');
        chkAll.checked = false;
        toggleDeleteButton();
        renderFilterOptions();
      }

      function toggleDeleteButton(){
        var any = document.querySelectorAll('#table-tags tbody .row-chk:checked').length > 0;
        document.getElementById('btn-delete').disabled = !any;
      }

      function renderFilterOptions(){
        var select = document.getElementById('filter-select');
        var options = tags.map(function(t){ return '<option value="'+t.name+'">'+t.name+'</option>'; }).join('');
        select.innerHTML = '<option value="">请选择</option>' + options;
      }

      function renderRelated(filter){
        var tbody = document.querySelector('#table-related tbody');
        var data = resources.filter(function(r){
          return !filter || r.tags.indexOf(filter) !== -1;
        });
        tbody.innerHTML = data.map(function(r){
          return '<tr>'+
            '<td>'+r.name+'</td>'+
            '<td>云主机</td>'+
            '<td>'+r.tags.length+'</td>'+
            '<td>'+r.tags.join('、')+'</td>'+
          '</tr>';
        }).join('');
      }

      function downloadTable(){
        var rows = [['资源名称','资源类型','标签数量','标签']];
        var trs = document.querySelectorAll('#table-related tbody tr');
        for (var i=0;i<trs.length;i++){
          var tds = trs[i].children;
          rows.push([tds[0].innerText, tds[1].innerText, tds[2].innerText, tds[3].innerText]);
        }
        var csv = rows.map(function(r){ return r.map(function(c){return '"'+c.replace(/"/g,'""')+'"';}).join(','); }).join('\n');
        var blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
        var url = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url; a.download = '关联资源.csv'; a.click();
        URL.revokeObjectURL(url);
      }

      function bind(){
        document.getElementById('btn-create').addEventListener('click', function(){
          if (window.jQuery) jQuery('#createTagModal').modal('show');
        });
        document.getElementById('confirmCreateTag').addEventListener('click', function(){
          var name = document.getElementById('newTagName').value.trim();
          if (!name) return;
          tags.unshift({ name: name, updatedAt: new Date().toISOString().slice(0,19).replace('T',' '), related: 0 });
          document.getElementById('newTagName').value='';
          if (window.jQuery) jQuery('#createTagModal').modal('hide');
          renderTags();
        });

        document.getElementById('table-tags').addEventListener('change', function(e){
          if (e.target && e.target.id === 'chk-all'){
            var on = e.target.checked;
            var rows = document.querySelectorAll('#table-tags tbody .row-chk');
            for (var i=0;i<rows.length;i++){ rows[i].checked = on; }
            toggleDeleteButton();
          } else if (e.target && e.target.classList.contains('row-chk')){
            toggleDeleteButton();
          }
        });

        document.getElementById('table-tags').addEventListener('click', function(e){
          if (e.target && e.target.classList.contains('link-delete')){
            var idx = parseInt(e.target.getAttribute('data-index'));
            tags.splice(idx,1);
            renderTags();
          }
        });

        document.getElementById('btn-delete').addEventListener('click', function(){
          var checks = document.querySelectorAll('#table-tags tbody .row-chk:checked');
          var idxs = Array.prototype.map.call(checks, function(c){ return parseInt(c.getAttribute('data-index')); });
          idxs.sort(function(a,b){return b-a;}).forEach(function(i){ tags.splice(i,1); });
          renderTags();
        });

        document.getElementById('btn-filter').addEventListener('click', function(){
          var val = document.getElementById('filter-select').value;
          renderRelated(val);
        });
        document.getElementById('btn-refresh').addEventListener('click', function(){
          var val = document.getElementById('filter-select').value;
          renderTags();
          renderRelated(val);
        });
        document.getElementById('btn-download').addEventListener('click', function(){
          downloadTable();
        });
      }

      renderTags();
      renderRelated('');
      bind();
    })();
  </script>
</body>
</html>


